<template>
  <div v-if="visible" class="batch-operation-progress">
    <div class="progress-info">
      <span>{{ title }}: {{ current }}/{{ total }}</span>
      <span>{{ percentage }}%</span>
    </div>
    <el-progress 
      :percentage="percentage" 
      :status="percentage === 100 ? 'success' : ''"
      :stroke-width="18"
      :format="() => ''"
    ></el-progress>
    
    <div class="progress-status" v-if="percentage < 100">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <span v-if="operationText">{{ operationText }}</span>
      <span v-else>正在处理第 {{ current }} 条数据...</span>
    </div>
    
    <div class="progress-status completed" v-else>
      <el-icon class="success-icon"><Check /></el-icon>
      <span v-if="completedText">{{ completedText }}</span>
      <span v-else>操作完成！</span>
    </div>
    
    <div class="progress-stats">
      <div class="stat-item">
        <span class="stat-label">成功:</span>
        <span class="stat-value success">{{ success }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">失败:</span>
        <span class="stat-value error">{{ failed }}</span>
      </div>
      <div class="stat-item">
        <span class="stat-label">总计:</span>
        <span class="stat-value">{{ current }}/{{ total }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Loading, Check } from '@element-plus/icons-vue';
import { computed } from 'vue';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  current: {
    type: Number,
    default: 0
  },
  total: {
    type: Number,
    default: 0
  },
  success: {
    type: Number,
    default: 0
  },
  failed: {
    type: Number,
    default: 0
  },
  title: {
    type: String,
    default: '进度'
  },
  operationText: {
    type: String,
    default: ''
  },
  completedText: {
    type: String,
    default: ''
  }
});

// 计算完成百分比
const percentage = computed(() => {
  if (props.total === 0) return 0;
  return Math.round((props.current / props.total) * 100);
});
</script>

<style scoped>
.batch-operation-progress {
  margin-top: 20px;
  padding: 15px;
  border-radius: 4px;
  background-color: #f8f8f8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px;
  color: #606266;
}

.progress-status {
  display: flex;
  align-items: center;
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f0f9eb;
  color: #67c23a;
  transition: all 0.3s ease;
}

.progress-status.completed {
  background-color: #f0f9eb;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { background-color: #f0f9eb; }
  50% { background-color: #e1f3d8; }
  100% { background-color: #f0f9eb; }
}

.loading-icon {
  margin-right: 8px;
  font-size: 16px;
  animation: spin 1.5s linear infinite;
}

.success-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #67c23a;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.progress-stats {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed #dcdfe6;
}

.stat-item {
  text-align: center;
  padding: 0 15px;
}

.stat-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: #606266;
}

.stat-value {
  font-weight: bold;
  font-size: 18px;
}

.success {
  color: #67C23A;
}

.error {
  color: #F56C6C;
}

:deep(.el-progress-bar__inner) {
  transition: width 0.3s ease;
}

:deep(.el-progress-bar__outer) {
  background-color: #e9e9e9;
}
</style> 